<template>
	<div>
		<div style="padding: 0px 15px;display: flex">
			<el-radio-group style="padding-top: 5px;width: 30%" v-model="chartType" @change="chartChange">
				<el-radio :label="1">{{$t('message.histogram')}}</el-radio>
				<el-radio :label="2">{{$t('message.graph')}}</el-radio>
			</el-radio-group><br/><br/>
			<div style="width: 70%;text-align: right;display: inline">
				<el-radio-group v-model="timeType" @change="timeChange">
					<el-radio label="Y">年</el-radio>
					<el-radio label="M">月</el-radio>
					<el-radio label="D">日</el-radio>
				</el-radio-group>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker v-if="timeType == 'D'" style="margin-left: 15px" size="small" :editable="false" :clearable="false" v-model="startTime" type="date" @change="changeStartTime"></el-date-picker>
				<el-date-picker v-if="timeType == 'M'" style="margin-left: 15px" size="small" :editable="false" :clearable="false" v-model="startTime" type="month" @change="changeStartTime"></el-date-picker>
				<el-date-picker v-if="timeType == 'Y'" style="margin-left: 15px" size="small" :editable="false" :clearable="false" v-model="startTime" type="year" @change="changeStartTime"></el-date-picker>

				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker v-if="timeType == 'D'" size="small" v-model="endTime" @change="changeEndTime" type="date" :editable="false" :clearable="false">
				</el-date-picker>
				<el-date-picker v-if="timeType == 'M'" size="small" :editable="false" :clearable="false" v-model="endTime" type="month" @change="changeEndTime"></el-date-picker>
				<el-date-picker v-if="timeType == 'Y'" size="small" :editable="false" :clearable="false" v-model="endTime" type="year" @change="changeEndTime"></el-date-picker>
			</div>
		</div>
		<div id="echart1" style="width:100%;height: 550px;margin:auto;"></div>
	</div>
</template>
<script>
	import $ from 'jquery'
	//import echarts from 'echarts/lib/echarts'
	var echarts = require('echarts/lib/echarts');
	// 引入柱状图
	require('echarts/lib/chart/bar');
	// 引入饼状图
	require('echarts/lib/chart/pie');
	// 引入曲线图
	require('echarts/lib/chart/line');
	// 引入提示框和标题组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/title');
	require('echarts/lib/component/legend')

	import { HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	var myChart = null;
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var o = {
					"M+": this.getMonth() + 1, //month 
					"d+": this.getDate(), //day 
					"h+": this.getHours(), //hour 
					"m+": this.getMinutes(), //minute 
					"s+": this.getSeconds(), //second 
					"q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
					"S": this.getMilliseconds() //millisecond 
				}
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for(var k in o) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
					}
				}
				return format;
			};
			return {
				timeType: 'D', //时间模式 年 月 日
				chartType: 1, //1 柱状图 2 折线图
				titleName: '',
				xAxisData: [], //横坐标
				seriesDatas: [], //指
				legendDatas: [],
				startTime: '',
				endTime: ''
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				this.$emit('backPrev');
			},
			getLastDayOfMonth(year, month) {
				var new_year = year; //取当前的年份          
				var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）          
				if(month > 12) {
					new_month -= 12; //月份减          
					new_year++; //年份增          
				}
				var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天          
				return(new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate(); //获取当月最后一天日期          
			},
			chartChange(data) {
				switch(data) {
					case 1:
					this.seriesDatas.forEach(function(item) {
						item.type = 'bar';
					})
					this.drawBar();
					break;
					case 2:
					this.seriesDatas.forEach(function(item) {
						item.type = 'line';
						item.smooth = true;
					})
					this.drawLine();
					break;
				}
			},
			timeChange(data) {
				switch(data) {
					case "D":
						this.getDatas();
						break;
					case "M":
						this.startTime = new Date(this.startTime).format('yyyy-MM') + '-01 00:00:00'
						this.endTime = new Date(this.endTime).format('yyyy-MM') + '-' + (this.getLastDayOfMonth(new Date(this.endTime).getFullYear(), new Date(this.endTime).getMonth() + 1)) + ' 23:59:59';
						this.getDatas();
						break;
					case "Y":
						this.startTime = new Date(this.startTime).format('yyyy') + '-01-01 00:00:00';
						this.endTime = new Date(this.endTime).format('yyyy') + '-12-31 23:59:59';
						this.getDatas();
						break;
				}
			},
			drawBar() {
				myChart = echarts.init(document.getElementById('echart1'));
				myChart.setOption({
					title: {},
					tooltip: {},
					legend: {
						data: this.legendDatas
					},
					xAxis: {
						data: this.xAxisData,
						name: '日期'
					},
					yAxis: {
						name: '在线时长(小时)'
					},
					series: this.seriesDatas
				});
			},
			drawLine() {
				myChart = echarts.init(document.getElementById('echart1'));
				myChart.setOption({
					title: {},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: this.legendDatas
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.xAxisData,
						name: '日期'
					},
					yAxis: {
						name: '在线时长(小时)'
					},
					series: this.seriesDatas
				});
			},
			changeStartTime() {
				if(this.timeType == 'M') {
					this.startTime = new Date(this.startTime).format('yyyy-MM') + '-01 00:00:00';
				} else if(this.timeType == 'Y') {
					this.startTime = new Date(this.startTime).format('yyyy') + '-01-01 00:00:00';
				}
				this.getDatas();
			},
			changeEndTime() {
				if(this.timeType == 'M') {
					this.endTime = new Date(this.endTime).format('yyyy-MM') + '-' + (this.getLastDayOfMonth(new Date(this.endTime).getFullYear(), new Date(this.endTime).getMonth() + 1)) + ' 23:59:59';
				} else if(this.timeType == 'Y') {
					this.endTime = new Date(this.endTime).format('yyyy') + '-12-31 23:59:59';
				}
				this.getDatas();
			},
			getSeriesDatas(array) {
				this.seriesDatas.length = 0;
				this.legendDatas.length = 0;
				if(this.templateObj.deviceType === 'Projector') {
					for(var i = 0; i < array.length; i++) {
						this.seriesDatas[i] = {};
						this.seriesDatas[i].name = array[i].proname;
						this.seriesDatas[i].data = array[i].hoursed;
						this.legendDatas.push(array[i].proname);
					}
				} else {
					for(var i = 0; i < array.length; i++) {
						this.seriesDatas[i] = {};
						this.seriesDatas[i].name = array[i].name;
						this.seriesDatas[i].data = array[i].hoursed;
						this.legendDatas.push(array[i].name);
					}
				}
			},
			getDatas() {
				if(this.templateObj.deviceType === 'Projector') {
					var param = {
						keyid: this.templateObj.keyid,
						type: this.timeType,
						begin: this.startTime,
						end: this.endTime,
					}
					HttpServer.httpPost.call(this, '/Api/Projector/GetHourUsedByType', param, function(response) {}, function(response) {
						// console.log(response)
						if(response.data.code === 0) {
							this.xAxisData = response.data.info[0].time;
							this.getSeriesDatas(response.data.info);
							this.$nextTick(function() {
								this.chartChange(this.chartType);
							});
						}
					})
				} else {
					var param = {
						sn: this.templateObj.sn,
						type: this.timeType,
						begin: this.startTime,
						end: this.endTime,
					}
					HttpServer.httpPost.call(this, '/Api/Bookracks/GetHourUsedByType', param, function(response) {}, function(response) {
						// console.log(response)
						if(response.data.code === 0) {
							this.xAxisData = response.data.info[0].time;
							// console.log('this.xAxisData',this.xAxisData)
							this.getSeriesDatas(response.data.info);
							// console.log('this.seriesDatas',this.seriesDatas)
							this.$nextTick(function() {
								this.chartChange(this.chartType);
							});
						}
					})
				}
			}
		},
		created() {
			this.startTime = this.templateObj.startTime;
			this.endTime = this.templateObj.endTime;
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>